<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    chartData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (val && val.datas && val.datas.length > 0) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      var series = []
      var that = this
      if (this.chartData.datas && this.chartData.datas.length > 0) {
        this.chartData.datas.forEach(v => {
          var row = {
            name: v.name,
            type: v.type,
            stack: v.stack,
            data: v.data
          }
          if (v.type === 'bar') {
            row.barWidth = this.chartData.barWidth || 12
            row.label = {
              show: this.chartData.seriesLabelShow || false,
              position: 'top',
              formatter: function(p) {
                if (that.chartData.valueFormatter) {
                  return moneyFormat(p.value, 'w', 2, true)
                } else {
                  return p.value
                }
              }
            }
          }
          if (v.type === 'line') {
            row.yAxisIndex = v.yAxisIndex === 0 ? 0 : 1
            row.smooth = true
            row.symbolSize = 0
            row.lineStyle = {
              width: 2,
              type: 'dotted',
              shadowColor: 'rgba(0,0,0,0.3)',
              shadowBlur: 7,
              shadowOffsetY: 5
            }
          }
          if (this.chartData.valueFormatter) {
            // row.name = row.name ? row.name + this.$t('金额单位') : ''
            row.tooltip = {
              valueFormatter: function(value) {
                return moneyFormat(value, 'w') + that.$t('金额单位')
              }
            }
          }
          series.push(row)
        })
      }

      this.chart.setOption({
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          confine: true,
          extraCssText: 'white-space: normal; word-break: break-all;',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(param) {
            let html = '<div>' + param[0].data.name + '</div>'
            html += '<div>' + param[0].marker + param[0].seriesName + '<span style="margin-left: 30px;float: right;font-weight: bold">' + moneyFormat(param[0].data.amount, 'w', 2, true) + '</span>' + '</div>'
            return html
          }
        },
        legend: {
          show: this.chartData.legend || false,
          type: this.chartData.datas.length > 15 ? 'scroll' : '',
          icon: 'roundRect',
          itemHeight: 5,
          itemWidth: 10,
          textStyle: {
            fontSize: 13,
            color: '#666666'
          },
          top: 0,
          left: this.chartData.legendLeft || 0,
          y: 'top'
        },
        grid: {
          top: this.chartData.legend ? (this.chartData.yAxisName1 ? 65 : 50) : 30,
          left: '2%',
          right: '2%',
          bottom: this.chartData.xLabel.length > 15 ? this.chartData.rotate ? 70 : 40 : 20,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,.06)'
              }
            },
            axisLabel: {
              interval: 0,
              rotate: this.chartData.rotate || 0,
              textStyle: {
                fontSize: 13,
                color: 'rgba(0,0,0,.54)'
              },
              formatter: function(value) {
                var val = ''
                if (value.length > 10) {
                  val = value.substr(0, 10) + '...'
                  return val
                } else {
                  return value
                }
              }
            },
            data: this.chartData.xLabel
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.chartData.yAxisName1,
            nameTextStyle: {
              fontSize: 12,
              align: 'left',
              padding: [0, 0, 0, -10],
              color: 'rgba(0,0,0,.54)'
            },
            // min: 0,
            // interval: 20,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#F2F3F3'],
                width: 1,
                type: 'dashed',
                opacity: 1
              }
            },
            splitArea: { show: false },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: 13,
                color: 'rgba(0,0,0,.54)'
              },
              formatter: function(value) {
                if (that.chartData.valueFormatter) {
                  return moneyFormat(value, 'w')
                } else {
                  return value
                }
              }
            }
          },
          {
            show: this.chartData.yAxis2 || false,
            type: 'value',
            name: this.chartData.yAxisName2,
            nameTextStyle: {
              fontSize: 12,
              align: 'right',
              padding: [0, -10, 0, 0],
              color: 'rgba(0,0,0,.54)'
            },
            // min: 0,
            max: this.chartData.yAxisName2 ? null : 100,
            interval: this.chartData.yAxisName2 ? null : 20,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            splitArea: { show: false },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#F2F3F3'],
                width: 1,
                type: 'dashed',
                opacity: 1
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: 13,
                color: 'rgba(0,0,0,.54)'
              },
              formatter: function(value) {
                if (that.chartData.valueFormatter) {
                  return moneyFormat(value, 'w')
                } else {
                  return value
                }
              }
            }
          }
        ],
        color: this.chartData.color || ['#434EB8', '#5F69E4', '#509AFD', '#71D5F8', '#14C8C7', '#FDB92C', '#FF8643', '#DB5A52'],
        dataZoom: [
          {
            type: 'slider',
            height: 18,
            bottom: 5,
            startValue: this.chartData.xLabel.length > 15 ? this.chartData.xLabel.length - 8 : 0,
            endValue: this.chartData.xLabel.length > 15 ? this.chartData.xLabel.length - 1 : 100,
            show: this.chartData.xLabel.length > 15 || false
          },
          {
            type: 'inside',
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
            show: this.chartData.xLabel.length > 15 || false
          }
        ],
        series: series
      })
      that.chart.on('click', function(event) {
        if (event.data) {
          that.$emit('clickHandel', event.data, event)
        }
      })

      that.chart.getZr().on('click', (params) => {
        const pointInPixel = [params.offsetX, params.offsetY]
        if (that.chart.containPixel('grid', pointInPixel)) {
          var xIndex = that.chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
          that.$emit('clickHandel', that.chartData.datas[0].data[xIndex])
        }
      })
    }
  }
}
</script>
